<template>
  <div class="documentRecord" id="nav-bar">
    <van-nav-bar title="文件申请记录" left-arrow @click-left="$router.go(-1)" />
    <ul class="list">
      <li class="item" v-for="(item, index) of dataList" :key="index">
        <header class="header">
          <p class="time">{{ item.createTime }}</p>
        </header>

        <div class="transcation">
          <div class="line">
            <p class="label">名称:</p>
            <p class="value">{{ item.fileName }}</p>
          </div>
          <div class="line right"></div>
          <!-- <div class="line">
            <p class="label">金额:</p>
            <p style="color: red" class="value">{{ item.payCountPrice }}</p>
          </div>
          <div class="line right">
            <p class="label">支付方式:</p>
            <p style="color: red" class="value">{{ item.payWayMap }}</p>
          </div> -->

          <div class="line">
            <p class="label">
              {{ item.payCountPrice ? "交易状态" : "申请状态" }}:
            </p>
            <p class="value">{{ item.tradeStatusMap }}</p>
          </div>
        </div>

        <div class="transcation">
          <div class="line">
            <p class="label">申请编号:</p>
          </div>
          <div class="line right">
            <p class="label">{{ item.orderId }}</p>
          </div>
          <div class="line" v-if="item.toEmail">
            <p class="label">邮箱地址:</p>
          </div>
          <div class="line right" v-if="item.toEmail">
            <p class="label">{{ item.toEmail }}</p>
          </div>
          <div class="line" v-if="item.downloadType === 1">
            <p class="label">剩余次数:</p>
          </div>
          <div class="line right" v-if="item.downloadType === 1">
            <p class="label">{{ item.sendMailNum }}</p>
          </div>
        </div>

        <footer class="footer">
          <div
            class="fot_area"
            v-if="item.downloadType === 1"
            @click="sendEamil(item)"
          >
            <img
              class="resend_icon"
              src="../../assets/images/iconpng/icon/email.png"
              alt=""
            />
            <p class="resend">发送邮箱</p>
          </div>
          <div
            class="fot_area"
            v-else-if="item.downloadType === 2"
            @click="downloadPDF(item)"
          >
            <img
              class="resend_icon"
              src="../../assets/images/iconpng/icon/file.png"
              alt=""
            />
            <p class="resend">下载PDF</p>
          </div>
        </footer>
      </li>

      <li v-if="dataList.length === 0">
        <p class="nonodata">暂无更多数据</p>
      </li>
    </ul>

    <van-dialog
      v-model="show"
      title="请输入邮箱"
      show-cancel-button
      @confirm="resendEmail"
      @cancel="show = false"
    >
      <van-field v-model="email" label="邮箱" placeholder="请输入邮箱" />
    </van-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
const tradeStatusMap = {
  1: "申请成功",
  2: "申请失败",
  3: "处理中",
};
const payWayMap = {
  1: "U米支付",
  2: "微信支付",
  3: "微信扫码",
  4: "免费次数",
};
export default {
  data() {
    return {
      dataList: [],
      show: false,
      email: "",
      currentItem: {},
    };
  },
  created() {
    this.refreshList();
  },
  computed: {
    ...mapGetters(["schoolConfig"]),
  },
  methods: {
    // 下载pdf
    downloadPDF(item) {
      if (item.sendMailNum < 1) {
        this.$dialog
          .alert({
            title: "提示",
            message: "下载次数已用尽",
          })
          .then(() => {});
        return;
      }
      if (this.$utils.Device("wechat")) {
        this.$dialog.alert({
          title: "提示",
          message: "微信内置浏览器无法下载文件,请使用其他浏览器下载",
        });
        return;
      }
      this.$toast.loading({ message: "加载中..." });
      this.$http({
        url: "/private-xm/pay/downloadPDF",
        method: "get",
        params: {
          orderId: item.orderId,
          fileName: item.fileName,
        },
        responseType: "arraybuffer",
      })
        .then((res) => {
          console.log(res, "这是获取的到内容");
          this.$toast.clear();
          let fileName = "";
          let contentDisposition = res.headers["content-disposition"];
          if (contentDisposition) {
            fileName = window.decodeURI(
              res.headers["content-disposition"].split("=")[1],
              "UTF-8"
            );
          }
          console.log('这是文件名',fileName);
          let url = window.URL.createObjectURL(
            new Blob([res.data], { type: "arraybuffer" })
          );
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", fileName || item.fileName + ".pdf");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.refreshList();
        })
        .catch((error) => {
          this.$toast.clear();
          console.log(error, "error");
          this.$toast(error);
        });
    },
    // 发送邮箱
    resendEmail() {
      this.$toast.loading({ message: "加载中..." });
      this.$http({
        url: "/private-xm/pay/againSendMail",
        method: "post",
        data: {
          orderId: this.currentItem.orderId,
          toEmail: this.email,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.$dialog
            .alert({
              title: "提示",
              message: "发送成功,请留意您的邮箱",
            })
            .then(() => {
              this.refreshList();
            });
        })
        .catch((error) => {
          this.$toast.clear();
          console.log(error, "error");
          this.$toast(error);
        });
    },
    // 点击发送邮箱
    sendEamil(item) {
      this.email = item.toEmail;
      this.currentItem = item;
      this.show = true;
    },
    // 获取下载or发送记录
    refreshList() {
      this.$toast.loading({ message: "加载中..." });
      this.$http({
        url: "/private-xm/order/list",
        method: "post",
      })
        .then((res) => {
          this.$toast.clear();
          res.data.forEach((item) => {
            item.tradeStatusMap = tradeStatusMap[item.tradeStatus];
            item.payWayMap = payWayMap[item.payWay];
          });
          this.dataList = res.data;
        })
        .catch((error) => {
          this.$toast.clear();
          console.log(error, "error");
          this.$toast(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variable.scss";
#nav-bar ::v-deep .van-nav-bar__title {
  // color: #fff;
  font-size: 0.506667rem /* 19/37.5 */;
}
.documentRecord {
  padding: 0.266667rem /* 10/37.5 */;
  .list {
    height: calc(100vh - 1.733333rem /* 65/37.5 */);
    overflow-y: scroll;
    padding-top: 0.266667rem /* 10/37.5 */;
    padding: 0.133333rem /* 5/37.5 */;
    .item {
      box-shadow: 1px 1px 6px 0 rgba(49, 113, 183, 0.2);
      border-radius: 0.213333rem /* 8/37.5 */;
      padding: 0.08rem /* 3/37.5 */ 0.32rem /* 12/37.5 */;
      &:not(:last-child) {
        margin-bottom: 0.346667rem /* 13/37.5 */;
      }
      .footer {
        .fot_area {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0.266667rem /* 10/37.5 */ 0;
          .resend_icon {
            width: 0.533333rem /* 20/37.5 */;
            height: 0.426667rem /* 16/37.5 */;
            margin-right: 0.186667rem /* 7/37.5 */;
          }
          .resend {
            font-size: 0.4rem + $fontsize /* 15/37.5 */;
            color: $primary;
          }
        }
      }
      .transcation {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #dedede;
        .line {
          width: 50%;
          display: flex;
          align-items: center;
          p {
            padding: 0 !important;
            margin: 0.293333rem /* 11/37.5 */ 0;
          }
          &.right {
            justify-content: flex-end;
          }
          p {
            font-size: 0.4rem + $fontsize /* 15/37.5 */;
            padding: 0.133333rem /* 5/37.5 */;
            color: #111;
          }
        }
      }
      .header {
        border-bottom: 1px solid #dedede;
        padding: 0.133333rem /* 5/37.5 */;
        .time {
          font-size: 0.373333rem + $fontsize /* 14/37.5 */;
          color: #999999;
          margin: 0.133333rem /* 5/37.5 */ 0;
        }
      }
    }
  }
}
</style>
